Manajer React experimental_SuspenseList: Menguasai Koordinasi Suspense

            
import React, { Suspense } from 'react';

// Sebuah komponen yang menangguhkan hingga data diambil
function MyComponent() {
  const data = useResource(fetchData()); // Hook useResource hipotetis
  return 
Data: {data}
;
}

function App() {
  return (
    Memuat...

Dalam contoh ini, MyComponent menggunakan hook useResource hipotetis untuk mengambil data. Jika data belum tersedia, komponen akan menangguhkan, dan React akan menampilkan fallback (

Memperkenalkan experimental_SuspenseList

experimental_SuspenseList adalah komponen yang memungkinkan Anda untuk mengoordinasikan tampilan beberapa batas Suspense. Ini sangat berguna ketika Anda memiliki daftar item yang masing-masing bergantung pada data asinkron. Tanpa SuspenseList, item-item tersebut mungkin muncul dalam urutan yang acak saat data mereka tersedia. SuspenseList memungkinkan Anda mengontrol urutan item ditampilkan, meningkatkan performa yang dirasakan dan pengalaman pengguna.

experimental_SuspenseList dianggap eksperimental, jadi Anda harus mengimpornya dari channel eksperimental:

            
import { unstable_SuspenseList as SuspenseList } from 'react';

            

              
                Copy
              
            
          

Properti revealOrder

Properti terpenting untuk SuspenseList adalah revealOrder. Properti ini menentukan urutan di mana batas Suspense di dalam SuspenseList ditampilkan. Properti ini menerima salah satu dari nilai berikut:

• forwards: Menampilkan batas Suspense sesuai urutan kemunculannya di pohon komponen.
• backwards: Menampilkan batas Suspense dalam urutan terbalik dari kemunculannya di pohon komponen.
• together: Menampilkan semua batas Suspense secara bersamaan setelah semua data tersedia.

Contoh dengan revealOrder="forwards"

Katakanlah Anda memiliki daftar kartu produk, dan setiap kartu perlu mengambil detail produk. Menggunakan revealOrder="forwards" memastikan bahwa kartu-kartu tersebut muncul dari atas ke bawah saat data mereka dimuat.

            
import React, { Suspense, unstable_SuspenseList as SuspenseList } from 'react';

function ProductCard({ productId }) {
  const product = useResource(fetchProduct(productId)); // Fungsi fetchProduct hipotetis
  return (
    

      
{product.name}
      
{product.description}
    
  );
}

function App() {
  const productIds = [1, 2, 3, 4, 5];
  return (
    
      {productIds.map((productId) => (
        Memuat produk...